<template>
  <!-- 赛事详情 单个赛事首页 单个管理 -->
  <div>
    <div class="title">{{matchName}}</div>
    <div class="left-card">
      <el-card class="box-card">
        <div class="smTit">访问量</div>
        <div class="num">
          {{msg.readCount}}
          <span class="tip">次</span>
        </div>
      </el-card>
      <el-card class="box-card">
        <div class="smTit">报名人数统计</div>
        <div class="num">
          {{msg.personNum['名单导入']+msg.personNum['线上报名']}}
          <span class="tip">人</span>
        </div>
        <div class="pp">
          <p class="pA">名单导入人数：{{msg.personNum['名单导入']}} 人</p>
          <p class="pB">线上报名人数：{{msg.personNum['线上报名']}} 人</p>
        </div>
      </el-card>
      <el-card class="box-card">
        <div class="smTit">收费统计</div>
        <div class="num">
          {{msg.sumPrice}}
          <span class="tip">元</span>
        </div>
      </el-card>
    </div>
    <div class="right-card">
      <el-card class="box-card-ech">
        <div class="smTit">报名人数统计(人)</div>
        <div class="ech-wrap" ref="myChartsA"></div>
      </el-card>
      <el-card class="box-card-ech">
        <div class="smTit">赛事收入统计(元)</div>
        <div class="ech-wrap" ref="myChartsB"></div>
      </el-card>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import bigNumber from "../../../assets/bigNumber"
export default {
  data() {
    return {
      msg: {
        readCount: 0,
        personNum: { 名单导入: 0, 线上报名: 0 },
        sumPrice: 0,
      },
      matchName:''
    };
  },
  methods: {
    // 报名人数统计
    chartsA() {
      let myCharts = echarts.init(this.$refs.myChartsA);
      let x = this.msg.applyInfolist.map((v) => {
        return v.date.substring(5, 10);
      });
      let y = this.msg.applyInfolist.map((v) => {
        return v.num;
      });
      var option = {
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: x,
        },
        yAxis: {
          type: "value",
          //  interval: 1, //间隔
          minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。
          axisTick: {
            //y轴刻度线
            show: false,
          },
          axisLine: {
            //y轴
            show: false,
          },
        },
        grid: {
          x: 50,
          y: 20,
          x2: 20,
          y2: 30, //距离下边的距离
        },
        series: [
          {
            data: y,
            type: "line",
            smooth: true,
            itemStyle: {
              color: "#d6e3fe",
            },
            lineStyle: {
              color: "#5865FF",
            },
            areaStyle: {},
          },
        ],
      };
      myCharts.setOption(option);
      window.addEventListener("resize", function () {
        myCharts.resize();
      });
    },
    // 赛事收入统计
    chartsB() {
      let myCharts = echarts.init(this.$refs.myChartsB);
      let x = this.msg.orderList.map((v) => {
        return v.date.substring(5, 10);
      });
      let y = this.msg.orderList.map((v) => {
        return v.price;
      });
      var option = {
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          // axisTick: {
          //   //x轴刻度线
          //   show: false,
          // },
          boundaryGap: false,
          data: x,
        },
        yAxis: {
          type: "value",
          axisTick: {
            //y轴刻度线
            show: false,
          },
          axisLine: {
            //y轴
            show: false,
          },
        },
        grid: {
          x: 50,
          y: 20,
          x2: 20,
          y2: 30, //距离下边的距离
        },
        series: [
          {
            data: y,
            type: "line",
            smooth: true,
            itemStyle: {
              color: "#d6e3fe",
            },
            lineStyle: {
              color: "#5865FF",
            },
            areaStyle: {},
          },
        ],
      };
      myCharts.setOption(option);
      window.addEventListener("resize", function () {
        myCharts.resize();
      });
    },
    getMsg() {
      this.$axios
        .get("/sbr/match/getMatchAnalysis/" + sessionStorage.getItem("MandA"))
        .then((res) => {
          let rr = res.data.data;
          this.matchName=rr.matchName
          this.msg = rr;
          this.chartsA();
          this.chartsB();
        });
    },
  },
  mounted() {
    this.getMsg();
  },
};
</script>
<style scoped>
/* @import url(); 引入公共css类 */
.title {
  font-size: 18px;
  margin-bottom: 15px;
}
.left-card {
  width: 370px;
  float: left;
  /* overflow: hidden; */
}
.box-card {
  width: 370px;
  margin-bottom: 15px;
  float: left;
}
.pp {
  overflow: hidden;
}
.pA,
.pB {
  float: left;
  width: 50%;
  text-align: center;
  overflow: hidden;
}
.right-card {
  width: calc(100% - 385px);
  float: right;
}
.box-card-ech {
  width: 100%;
  float: right;
  margin-bottom: 15px;
}
/* .smTit{} */
.num {
  font-size: 80px;
  text-align: center;
  margin-top: 15px;
}
.tip {
  font-size: 15px;
}

.ech-wrap {
  width: 100%;
  height: 220px;
  /* background-color: pink; */
  margin-top: 10px;
}
</style>